<template>
  <div>
    <p>{{ c }}</p>
    <button @click="change()">click</button>
  </div>
</template>
<script>
import { reactive, ref } from 'vue';
export default {
  props: {
    item: String,
  },
  //setup函数会在beforeCreate之后，created之前执行 setup相当于是预设配置
  //setup函数的第一个形参，接收props数据,通过props.item获取
  setup(props) {
    var c = ref(10); //初始化值为10

    const change = () => {
      //方法的定义
      c.value += 1; //想改变值或获取值 必须.value
    };
    return {
      c,
      change,
    };

    // //创建响应式数据对象
    // const state = reactive({
    //   name: 'abc',
    // });
    // //setup函数中将响应式数据对象return出去供template使用
    // return { c };
  },
};
</script>
